<template>
    <div class="real-main">
        <section class="order-main-header">
            <mt-header title="实名认证">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
        <div class=" load-content">
             <div class=" load-main" v-if="loadTime">
                    <section class="header">
                        <div class="row" >
                            <p :class="!sessionData.authDeep&&!sessionData.authDeepPost?'bus-border':''">1</p>
                            <span :class="!sessionData.authDeep&&!sessionData.authDeepPost?'bus-text':''">提交证件</span>
                        </div>
                        <div class="business-line"></div>
                        <div class="row">
                            <p :class="sessionData.authDeepPost?'bus-border':''">2</p>
                            <span :class="sessionData.authDeepPost?'bus-text':''">审核中</span>
                        </div>
                        <div class="business-line"></div>
                        <div class="row">
                            <p :class="sessionData.authDeep?'bus-border':''">3</p>
                            <span :class="sessionData.authDeep?'bus-text':''">审核结果</span>
                        </div>
                    </section>
                    <section>
                        <div class="post" v-if="sessionData.authDeepPost&&!userToReudit">
                            <img src="../../assets/comple.png">
                                <p>您已提交实名认证，请耐心等待。 如有问题请联系客服处理。</p>
                        </div>
                        <div class="post" v-if="sessionData.authDeep">
                            <img src="../../assets/ok.png">
                                <p>您已成功实名认证，请放心进行交易。 实名信息如下</p>
                                <p>姓名： {{userInfo.name}}</p>
                                <p>证件号：{{userInfo.no}} </p>
                        </div>
                        <div class="post" v-if="userToReudit">
                            <img src="../../assets/close.png">
                                <span>{{userToReudit}}</span>
                                <button class="submit" @click="uploadBtn()">重新提交</button>
                        </div>
                    </section>
                <section class="name " v-if="(!sessionData.authDeep&&!sessionData.authDeepPost&&!userToReudit)" >
                            <div class="ipt"> 
                            <span class="lab">姓名:</span> <input placeholder="请输入姓名" v-model="name">
                            </div>
                            <div class="ipt"> 
                            <span class="lab"> 证件号</span> <input placeholder="请输入证件号" v-model="phone">
                            </div>
                    </section>
                    <section class="real-img " v-if="!sessionData.authDeep&&!sessionData.authDeepPost&&!userToReudit" >
                        <div class="real-upload">
                            <div  autocomplete="off" class="  bus-form-inline pm-itemcont">
                                    <form ref="form1" enctype="multipart/form-data"  class="identify_img form" method="post" >
                                        <div id="aliCodeImgBox" class="sfz-img">
                                                <img  src="../../assets/real2.png" id="img1" v-if="!realImg1" />
                                                <img :src="realImg1" v-if="realImg1" >
                                            <div style="padding-top:35px;" class="loading dn">
                                            </div>
                                        </div>
                                        <input type="hidden" name="type" value="1" >
                                        <input  class="file" @click="update" id="upload_file" ref="inputEr"  name="img" type="file" multiple  accept="image/png,image/gif,image/jpeg">
                                    </form>
                            </div>
                            <div class="text">
                                上传人像页照片
                            </div>
                        </div>
                        <div class="real-upload">
                            <div class="bg pm-itemcont">
                                <form ref="form2" enctype="multipart/form-data"  class="identify_img form" method="post" >
                                        <div id="aliCodeImgBox" class="sfz-img">
                                                <img  src="../../assets/real3.png" id="img1" v-if="!realImg2" />
                                                <img :src="realImg2" v-if="realImg2" >
                                            <div style="padding-top:35px;" class="loading dn">
                                            </div>
                                        </div>
                                        <input type="hidden" name="type" value="1" >
                                        <input  class="file" @change="update1" id="upload_file" ref="inputEr1"  name="img" type="file" accept="image/png,image/gif,image/jpeg">
                                    </form>
                            </div>
                            <div class="text">
                                上传国徽页照片
                            </div>
                        </div>
                        <div class="real-upload">
                            <div class="bg pm-itemcont">
                                <form ref="form3" enctype="multipart/form-data"  class="identify_img form" method="post" >
                                        <div id="aliCodeImgBox" class="sfz-img">
                                                <img  src="../../assets/real1.png" id="img1" v-if="!realImg3" />
                                                <img :src="realImg3" v-if="realImg3" >
                                            <div style="padding-top:35px;" class="loading dn">
                                            </div>
                                        </div>
                                        <input type="hidden" name="type" value="1" >
                                        <input  class="file" @change="update2" id="upload_file" ref="inputEr2" name="img"  type="file" accept="image/png,image/gif,image/jpeg">
                                    </form>
                            </div>
                            <div class="text">
                                上传手持身份证照片
                            </div>
                        </div>
                    </section>
                    <section class="footer" v-if="!sessionData.authDeep&&!sessionData.authDeepPost&&!userToReudit" >
                        <p>上传要求</p>
                        <p>1、必须能看清证件信息 </p>
                        <p>2、提交本申请代表承诺你的证件信息正式可靠，不存在盗用他人信息的情况 </p>
                        <p> 3、手持证件照片，同时附带一张纸质文字说明：Biplus交易所高级认证专用+日期（例如：Biplus交易所高级认证专用XXXX年X月X日）审核时间为一个工作日</p>
                        <div class="btn">
                            <button class="submit" @click="uploadAut()">提交</button>
                        </div>
                    </section>
             </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
  import { Toast } from 'mint-ui';//导入toast组件
export default {
    name:'',
   data(){
         return {
             list:[],
             realImg1:'',
             realImg2:'',
             realImg3:'',
             sessionData:{authDeep:'',authDeepPost:''},
             src:'https://biplush.oss-ap-southeast-1.aliyuncs.com/',
             name:'',
             phone:'',
             otcStatus:null,
             fIdentityPath1:'',
             fIdentityPath2:'',
             fIdentityPath3:'',
             userInfo:'',
             userToReudit:'',
             loadTime:''
         }
    },
    mounted() {
        this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            this.sessionData=res.data.data;
             this.toReudit();
        })
        this.getOtcInfo();
    },
    methods: {
        uploadBtn(){
            this.sessionData.authDeep=false;
            this.sessionData.authDeepPost=false;
             this.userToReudit=false;
        },
        getOtcInfo(){
         this.$http.post('v1/frontSession?'+ new Date().getTime(),).then((res)=>{
            this.userInfo=res.data.data;
        })
        },
        toReudit(){
            this.$http.post('v1/account/WhetherToReudit').then((res)=>{
                if(res.data.code==200){
                    if( this.sessionData.auth){
                         this.userToReudit=''
                    }
                    if( !this.sessionData.authDeep&&!this.sessionData.authDeepPost){
                         this.userToReudit=false
                    }
                    if(Object.keys(res.data.data)!=0){
                    this.userToReudit=res.data.data.reason;
                    }
                    this.loadTime=true;
                }
        })
        },
        　　　update(file){
            let inputDOM =  this.$refs.inputEr;
            var fil = inputDOM.files;
            for (let i=0; i < fil.length; i++) {
                let size = Math.floor(fil[i].size / 1024);
                if (size > 4*1024) {
                    Toast('请选择4M以内的图片！');
                    return false
                }
            }
                 var formData = new FormData(this.$refs.form1);  
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };  //添加请求头
               const instance=axios.create({
                    withCredentials: true
                    })
                  instance.post('/v1/account/upload.html',formData,config)
                .then(res=>{
                    if(res.data.code==200){
                        this.fIdentityPath1=res.data.data;
                    this.realImg1=this.src+res.data.data+'?x-oss-process=image/resize,w_350,h_200,m_pad';
                    }else if(res.data.code==3){
                       Toast("无效的图片");
                    }
                })        
            },     
            　update1(e){
            let     inputDOM =  this.$refs.inputEr1;
            var fil = inputDOM.files;
            for (let i=0; i < fil.length; i++) {
                let size = Math.floor(fil[i].size / 1024);
                if (size > 4*1024) {
                    Toast('请选择4M以内的图片！');
                    return false
                }
            }
                 var formData = new FormData(this.$refs.form2);  
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };  //添加请求头
               const instance=axios.create({
                withCredentials: true
                })
                  instance.post('/v1/account/upload.html',formData,config)
                .then(res=>{
                    if(res.data.code==200){
                         this.fIdentityPath2=res.data.data;
                    this.realImg2=this.src+res.data.data+'?x-oss-process=image/resize,w_350,h_200,m_pad';
                    }else if(res.data.code==3){
                       Toast("无效的图片");
                    }
                })        
            },   
               　update2(e){
                    let inputDOM =  this.$refs.inputEr2;
            var fil = inputDOM.files;
            for (let i=0; i < fil.length; i++) {
                let size = Math.floor(fil[i].size / 1024);
                if (size > 4*1024) {
                    Toast('请选择4M以内的图片！');
                    return false
                }
            }
                 var formData = new FormData(this.$refs.form3);  
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };  //添加请求头
               const instance=axios.create({
                    withCredentials: true
                    })
                  instance.post('/v1/account/upload.html',formData,config)
                .then(res=>{
                    if(res.data.code==200){
                          this.fIdentityPath3=res.data.data;
                    this.realImg3=this.src+res.data.data+'?x-oss-process=image/resize,w_350,h_200,m_pad';
                    }else if(res.data.code==3){
                       Toast("无效的图片");
                    }
                })        
            },   
            uploadAut(){
                 if(this.name==''){
                    Toast("请输入姓名");
                    return;
                }
                 if(this.phone==''){
                    Toast("请输入证件号");
                     return;
                }
                 if(!(this.fIdentityPath1&&this.fIdentityPath2&&this.fIdentityPath3)){
                    Toast("图片不能为空");
                    return ;
                }
                var data={no:this.phone,name:this.name,fIdentityPath1:this.fIdentityPath1,fIdentityPath2:this.fIdentityPath2,fIdentityPath3:this.fIdentityPath3}
                this.$http.post('/v1/account/uploadAuth',data).then((res)=>{
                if(res.data.code==200){
                    Toast("已成功提交认证");
                    location.reload();
                }else if(res.data.code==4){
                         Toast("证件号码已被绑定");
                    }
             })
            },
              handleClose(){
                this.$router.go(-1);
            },  
    },
}
</script>
<style lang="less" scoped>
.sfz-img{
    position: absolute;
}

  .submit {
    height:86px;
    font-size: 28px;
    line-height: 68px;
    font-weight: 700;
    border-radius:5px;
    background:rgba(82,152,241,1);
    border-radius:10px;
    width: 80%;
    margin:20px;
    color: #FFFFFF;
}
.mint-header {
    height: 100px;
    font-size: 32px;
    background-color: #222240 ;
    color: #E0E0F9;
}
.bus-border{
     background: #5298F1;
      border: 1px solid #5298F1 !important;
}
.bus-text{
   color: #5298F1
}
.name {
background:rgba(34,34,64,1);
}
.name .ipt{
    height:96px;
   margin-top: 20px;
}
.name .ipt input{
    height:96px;
    line-height:40px;
    font-size:28px;
    color: #E0E0F9;
    border:1px solid rgba(34,34,64,1);
    outline: none;
    background: rgba(34,34,64,1);;
}
.name .ipt .lab{
   width: 120px;
   text-align: center;
   color: #8686C0;
}
 .business-line {
    height: 1px;
    border: 1px solid #8686C0;
    width: 250px;
    position: relative;
    top: -10px;
}
.pm-itemcont input[type=file] {
    width: 540px;
    height: 360px;
    top: 0px;
    top: 40px;
    left: 15%;
    z-index: 1;
    opacity: 0;
}
.btn{
         display: flex;
        justify-content: center;
         align-items: center;
         margin-top: 20px;
}
    .real-main{
       .header{
               padding-left: 20px;
               padding-right: 20px;
           align-items: center;
           background: #222240;
           color: #8686C0;
            flex-direction: row;
            height:200px;
               display: flex;
           .row{
                display: flex;
                justify-content: center;
                align-items: center;
                 flex-direction: column;
                 span{
                     margin-top: 10px;
                 }
               p:nth-child(1){
                   font-size: 24px;
                   width:56px;
                height:56px;
                line-height: 56px; 
              border:1px solid #8686C0;
                color: #FFFFFF;
                border-radius: 50%;
                text-align: center;
               }
                    width: 33%;
           }
       } 
       .real-img{
           .real-upload{
               height: 450px;
               margin-top: 40px;
           }
           position: relative;
              display: flex;
                 flex-direction: column;
                 align-items: center;
           .bg{
                   height: 360px;
                     width: 540px;
           }
           .text{
               height:44px;
               line-height: 44px;
               margin-top: 20px;
               color: #8686E1;
            font-size:32px;
            text-align: center;
           }
                 img{
                     height: 360px;
                     width: 540px;
                 }
       }
       .footer{
           color: #8686E1;
           font-size: 28px;
           line-height:40px;
           padding: 30px;
         
       }
    }
    .post{
        text-align: center;
       font-size:28px;
       margin-top: 100px;
       font-weight:500;
       color: #FFFFFF;
       p{
           padding-top: 60px;
           margin: 0 auto;
           width: 60%;
           text-align: left;
       }
    }
     .order-main-header header{
    width: 100%;
}
  .load-content{
           position: absolute;
           top:140px;
           bottom: 30px;
           overflow-y: scroll;
           -webkit-overflow-scrolling:touch
       }
       .load-main{
           height: 100%;
       }
</style>